<!--
 * @Author: Dorange.Wang
 * @Date: 2021-07-14 14:30:16
 * @LastEditors: your name
 * @LastEditTime: 2021-07-19 17:24:46
 * @Description: file content
-->
<template>
  <van-field
    readonly
    clickable
    :label="instance.__config.label"
    :placeholder="instance.__config.placeholder"
    :value="instance.__config.showSeparator ? thousandsValue : value"
    @touchstart.native.stop="handleClick"
  >
    <template v-slot:extra>
      <span :class="b('unit')">{{ unit }}</span>
    </template>
  </van-field>
</template>

<script>
import Bem from "easy-bem";
import { widgetMixin } from "../mixin";
import Keyboard from "@/components/keyboard/instance";
import { CURRENCY_ENUM } from "@/utils/enum";
import {getThousandsValue} from '@/utils/util'
export default {
  name: "HanInputCurrency",
  mixins: [widgetMixin],
  data() {
    return {
      b: Bem("han-input-currency"),
      value: undefined,
    };
  },

  computed: {
    unit() {
      return CURRENCY_ENUM.find(
        (item) => item.key === this.instance.__config.currency
      )?.unit;
    },
    thousandsValue() {
      const { value } = this;
      return getThousandsValue(value)
    },
  },

  watch: {
    values: {
      handler: "handleValuesChange",
      immediate: true,
      deep: true,
    },
  },

  methods: {
    handleValuesChange(values) {
      this.value = values[this.field];
    },

    handleValueChange(value) {
      this.valueCallback(this.field, value);
    },

    handleClick() {
      const { value } = this;
      const { max, min, limitNumber: precision } = this.instance.__config;
      Keyboard.init({
        value,
        max,
        min,
        precision,
        onChange: (value) => {
          console.log("onChange", value);
          this.value = value;
        },
      });
    },
  },
};
</script>

<style lang="less">
@import "../../../node_modules/vant/lib/style/var";
.han-input-currency {
  &__unit {
    color: @field-right-icon-color;
    font-size: @font-size-sm;
  }
}
</style>
